<template>
	<view>
		<tabs :items="items" z-class="tabs-custom"></tabs>
		<view class="tabs-custom">
			<tabs-scroll-x :items="items3"></tabs-scroll-x>
		</view>
		<view class="tabs-custom">
			<sticker :scroll-top="scrollTop" :style-top="top">
				<tabs :items="items2" z-class="tabs-stick"></tabs>
			</sticker>
		</view>
		<text class="content">
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
			-
		</text>
	</view>
</template>

<script>
	export default {
		created() {
			// #ifdef H5
			this.top = 44
			// #endif
		},
		data() {
			return {
				items:[
					{name:'标签一'},
					{name:'标签二'},
					{name:'标签三'},
					{name:'标签四'}
				],
				items2:[
					{name:'标签一', dot:true},
					{name:'标签二', count:3},
					{name:'标签三'},
					{name:'标签四', count:'new'}
				],
				items3:[
					{name:'可左滚动'},
					{name:'标签二'},
					{name:'标签三'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'},
					{name:'标签四'}
				],
				scrollTop: null,
				top: 0
			}
		},
		methods: {
			
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss">
page{
	background-color:$page-bg;
}
.tabs-custom{
	margin-top: 40upx;
}
.tabs-stick{
	border-top: solid 1upx #eee;
}
.content{
	display: block;
	padding: 40upx;
}
</style>
